function Echarts() {

}

Echarts.prototype.run = function (param) {
    var self = this;
    self.InitEchartsEvent();
};


// 渲染图表主逻辑
Echarts.prototype.InitEchartsEvent = function (params) {
    layui.use(['layer', 'form', 'element'], function (param) {
        var layer = layui.layer,
            element = layui.element,
            form = layui.form;

        // ************************************************************************************************

        // 预警类型统计 -- 小圈
        var myChart1 = echarts.init(document.getElementById('echarts-bar1'));
        $.ajax({
            type: 'get',
            url: '/public/small/',
            data: {
                'type': 1
            },
            success: function (result) {
                if (result['code'] === 200) {
                    var data = result['data'];
                    var small = data.slice(0, 2);
                    var score = data.slice(-1)[0]['score'];
                    var html = template('small-data', {'data1': score});
                    document.getElementById('small').innerText = html;
                    myChart1.setOption({
                        tooltip: {
                            show: false,
                            trigger: 'none',
                        },
                        series: [
                            {
                                name: '数据详情',
                                type: 'pie',
                                silent: true,
                                radius: ['32%', '40%'],
                                center: ['65%', '50%'],
                                avoidLabelOverlap: false,
                                label: {
                                    color: 'red',
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: false,
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data: [
                    {
                        'value': 555,
                        'name': '泼水预警'
                    },
                    {
                        'value': 222,
                        'name': '抛物预警'
                    },
                    {
                        'score': 777
                    }
                ]
                            }
                        ],
                        color: ['#00A5ED', '#EBF4F7']
                    });
                }
            }
        });

        // 预警类型统计 -- 大圈

        var myChart2 = echarts.init(document.getElementById('echarts-bar2'));
        $.ajax({
            type: 'get',
            url: '/public/small/',
            data: {
                'type': 2
            },
            success: function (result) {
                if (result['code'] === 200) {
                    var data = result['data'];
                    var big = data.slice(0, 2);
                    var score = data.slice(-1)[0]['score'];
                    var html = template('big-data', {'data2': score});
                    document.getElementById('big').innerText = html;
                    myChart2.setOption({
                        title: {
                            text: '预警类型',
                            x: 'left',
                            textStyle: {
                                color: '#617282',
                            },
                        },
                        series: [
                            {
                                name: '数据详情',
                                type: 'pie',
                                silent: true,
                                radius: ['62%', '70%'],
                                center: ['65%', '50%'],
                                avoidLabelOverlap: false,
                                label: {
                                    color: 'red',
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data: [
                    {
                        'value': 555,
                        'name': '泼水预警'
                    },
                    {
                        'value': 222,
                        'name': '抛物预警'
                    },
                    {
                        'score': 777
                    }
                ]
                            },
                        ],
                        color: ['#F6511D', '#EBF4F7']
                    });
                }
            }
        });

        // 预警top3

        var myChart3 = echarts.init(document.getElementById('echarts-broken'));

        $.ajax({
            type: 'get',
            url: '/public/top_three/',
            data: {},
            success: function (result) {
                if (result['code'] === 200) {
                    var data = result['data'];
                    myChart3.setOption({
                        title: {
                            text: '预警TOP3',
                            x: 'left',
                            textStyle: {
                                color: '#617282',
                            },
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} "
                        },
                        legend: {
                            x: 'right',
                            orient: 'vertical',
                            data: data['name'],
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: ['55%', '65%'],
                                center: ['40%', '50%'],
                                data: data,
                                color: ['#6739B7', '#A575CD', '#D1C3E9']
                            }
                        ]

                    });
                }
            }
        });

        // ************************************************************************************************

        // 事件类型统计

        var myChart4 = echarts.init(document.getElementById('echarts-pillar'));
        $.ajax({
            type: 'get',
            url: '/public/event_type/',
            data: {},
            success: function (result) {
                if (result['code'] === 200) {
                    var data = result['data'];
                    var event_yes = data[0]['value'];
                    var event_no = data[1]['value'];
                    var html1 = template('event-data1', {'data1': event_no});
                    document.getElementById('event1').innerText = html1;

                    var html2 = template('event-data2', {'data2': event_yes});
                    document.getElementById('event2').innerText = html2;

                    myChart4.setOption({
                        title: {
                            text: '事件类型',
                            x: 'left',
                            textStyle: {
                                color: '#617282',
                            },
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} "
                        },
                        legend: {
                            x: 'right',
                            orient: 'vertical',
                            data: ['正常上报', '疑似事件']
                        },
                        series: [
                            {
                                name: '访问来源',
                                silent: true,
                                type: 'pie',
                                radius: ['40%', '55%'],
                                center: ['50%', '45%'],

                                data: data,
                                color: ['#F6511D', '#00A5ED']
                            }
                        ]
                    });
                }
            }
        });

        // ************************************************************************************************

        element.on('tab(line-echarts)', function (data) {
            var index = data.index;
            echarts.dispose(document.getElementById("echarts-line" + index)); // 再次加载时 刷新dom
            var myChart4 = echarts.init(document.getElementById('echarts-line' + index), 'demo');
            $.ajax({
                type: 'get',
                url: '/public/line_data/',
                data: {
                    'index': index
                },
                success: function (result) {
                    if (result['code'] === 200) {
                        var data = result['data'];
                        myChart4.setOption(
                            {
                                legend: {},
                                tooltip: {},
                                dataset: {
                                    // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                                    // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
                                    dimensions: ['product', '已完成', '已丢弃'],
                                    source: data
                                },
                                xAxis: {
                                    type: 'category',
                                    name: ''
                                },
                                yAxis: {
                                    name: '',
                                    splitLine: {
                                        show: true,
                                        lineStyle: {
                                            color: '#f4f2f3',
                                            width: '1',
                                            type: 'solid'
                                        }
                                    },
                                },
                                grid: {
                                    left: '2%',
                                    right: '2%',
                                    bottom: '5%',
                                    containLabel: true
                                },
                                series: [{
                                    type: 'bar'
                                },
                                    {
                                        type: 'bar'
                                    }
                                ],
                                color: ['#39CF78', '#E6B600']
                            }
                        )
                    }
                }
            });
        });

        // ************************************************************************************************

        //　柱状图　初始化实例
        element.on('tab(column-echarts)', function (data) {
            var index = data.index;
            echarts.dispose(document.getElementById("echarts-column" + index)); // 再次加载时 刷新dom
            var myChart5 = echarts.init(document.getElementById('echarts-column' + index), 'demo');
            $.ajax({
                type: 'get',
                url: '/public/column_data/',
                data: {
                    'index': index
                },
                success: function (result) {
                    if (result['code'] === 200) {
                        var data = result['data'];
                        myChart5.setOption(
                            {
                                legend: {},
                                tooltip: {},
                                dataset: {
                                    // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                                    // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
                                    dimensions: ['product', '周界入侵', '未穿工装'],
                                    source: data
                                },
                                xAxis: {
                                    type: 'category',
                                    name: ''
                                },
                                yAxis: {
                                    name: '',
                                    splitLine: {
                                        show: true,
                                        lineStyle: {
                                            color: '#f4f2f3',
                                            width: '1',
                                            type: 'solid'
                                        }
                                    },
                                },
                                grid: {
                                    left: '2%',
                                    right: '2%',
                                    bottom: '5%',
                                    containLabel: true
                                },
                                series: [{
                                    type: 'bar'
                                },
                                    {
                                        type: 'bar'
                                    }
                                ],
                                color: ['#00A5ED', '#7FB800']
                            }
                        )
                    }
                }
            });
        });
        // ************************************************************************************************
    });
};

// ************************************************************************************************
// 首页刷新　柱状图自动加载数据
$(function () {
    echarts.dispose(document.getElementById("echarts-line0")); // 再次加载时 刷新dom
    var myChart4 = echarts.init(document.getElementById('echarts-line0'), 'demo');
    $.ajax({
        type: 'get',
        url: '/public/line_data/',
        data: {
            'index': 0
        },
        success: function (result) {
            if (result['code'] === 200) {
                var data = result['data'];
                myChart4.setOption(
                    {
                        legend: {},
                        tooltip: {},
                        dataset: {
                            // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                            // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
                            dimensions: ['product', '已完成', '已丢弃'],
                            source: data
                        },
                        xAxis: {
                            type: 'category',
                            name: ''
                        },
                        yAxis: {
                            name: '',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#f4f2f3',
                                    width: '1',
                                    type: 'solid'
                                }
                            },
                        },
                        series: [{
                            type: 'bar'
                        },
                            {
                                type: 'bar'
                            }
                        ],
                        grid: {
                            left: '2%',
                            right: '2%',
                            bottom: '2%',
                            containLabel: true
                        },
                        color: ['#39CF78', '#E6B600']
                    }
                )
            }
        }
    });
});


$(function () {
    var echarts = new Echarts();
    echarts.run();
});


// ************************************************************************************************
// 首页刷新　柱状图自动加载数据
$(function () {
    echarts.dispose(document.getElementById("echarts-column0")); // 再次加载时 刷新dom
    var myChart5 = echarts.init(document.getElementById('echarts-column0'), 'demo');
    $.ajax({
        type: 'get',
        url: '/public/column_data/',
        data: {
            'index': 0
        },
        success: function (result) {
            if (result['code'] === 200) {
                var data = result['data'];
                myChart5.setOption(
                    {
                        legend: {},
                        tooltip: {},
                        dataset: {
                            // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                            // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
                            dimensions: ['product', '周界入侵', '未穿工装'],
                            source: data
                        },
                        xAxis: {
                            type: 'category',
                            name: ''
                        },
                        yAxis: {
                            name: '',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#f4f2f3',
                                    width: '1',
                                    type: 'solid'
                                }
                            },
                        },
                        grid: {
                            left: '2%',
                            right: '2%',
                            bottom: '2%',
                            containLabel: true
                        },
                        series: [{
                            type: 'bar'
                        },
                            {
                                type: 'bar'
                            }
                        ],
                        color: ['#00A5ED', '#7FB800']
                    }
                )
            }
        }
    });
});


$(function () {
    var echarts = new Echarts();
    echarts.run();
});


//　初始化实例 1
// var myChart1 = echarts.init(document.getElementById('echarts-bar'), 'demo');
// $.ajax({
//     type: 'get',
//     url: '/public/cake_data/',
//     data: {},
//     success: function (result) {
//         if (result['code'] === 200) {
//             var data = result['data'];
//             var data_Spilling = data['Spilling'];
//             var data_water = data['water'];
//             myChart1.setOption({
//                 angleAxis: {
//                     type: 'category',
//                     data: ['清晨', '上午', '下午', '傍晚'],
//                 },
//                 radiusAxis: {},
//                 polar: {},
//                 series: [{
//                     type: 'bar',
//                     data: data_Spilling,
//                     coordinateSystem: 'polar',
//                     name: '抛物预警',
//                     stack: 'a'
//                 }, {
//                     type: 'bar',
//                     data: data_water,
//                     coordinateSystem: 'polar',
//                     name: '泼水预警',
//                     stack: 'a'
//                 }],
//                 legend: {
//                     orient: 'vertical',
//                     left: 'left',
//                     show: true,
//                     data: ['抛物预警', '泼水预警']
//                 },
//                 color: ['#66B92E', '#0098D9']
//             });
//         }
//     }
// });

// ************************************************************************************************

// ************************************************************************************************

//　初始化实例 2
// var myChart2 = echarts.init(document.getElementById('echarts-broken'));
//
// // 渲染前端页面
// $.ajax({
//     type: 'get',
//     url: '/public/top_five/',
//     data: {},
//     success: function (result) {
//         if (result['code'] === 200) {
//             var data = result['data'];
//             myChart2.setOption({
//                 title: {
//                     text: '预警TOP5',
//                     x: 'center'
//                 },
//                 tooltip: {
//                     trigger: 'item',
//                     formatter: "{a} <br/>{b} : {c} ({d}%)"
//                 },
//                 // legend: {
//                 //     orient: 'vertical',
//                 //     left: 'left',
//                 //     data: [data[0]['name'], data[1]['name'], data[2]['name'], data[3]['name'], data[4]['name']]
//                 // },
//                 grid: {
//                     left: '6%',
//                     right: '1%',
//                     bottom: '5%',
//                     containLabel: true
//                 },
//                 series: [
//                     {
//                         name: '访问来源',
//                         type: 'pie',
//                         radius: '55%',
//                         center: ['50%', '60%'],
//                         data: data,
//                         itemStyle: {
//                             emphasis: {
//                                 shadowBlur: 10,
//                                 shadowOffsetX: 0,
//                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
//                             }
//                         }
//                     }
//                 ],
//                 color: ['#0098D9', '#E6B600', '#39CF78', '#2F4554', '#C12E34']
//             });
//         }
//     }
// });

// ************************************************************************************************

// ************************************************************************************************

//　初始化实例 3
// var myChart3 = echarts.init(document.getElementById('echarts-pillar'));
//
// // 渲染前端页面
// $.ajax({
//     type: 'get',
//     url: '/public/warn_type/',
//     data: {},
//     success: function (result) {
//         if (result['code'] === 200) {
//             var data = result['data']['sum_data'];
//             myChart3.setOption({
//                 title: {
//                     text: '预警分类统计',
//                     x: 'center'
//                 },
//                 tooltip: {
//                     trigger: 'item',
//                     formatter: "{a} <br/>{b} : {c} ({d}%)"
//                 },
//                 legend: {
//                     orient: 'vertical',
//                     left: 'left',
//                     data: ['智能预警', '手动预警']
//                 },
//                 grid: {
//                     left: '6%',
//                     right: '1%',
//                     bottom: '5%',
//                     containLabel: true
//                 },
//                 series: [
//                     {
//                         name: '访问来源',
//                         type: 'pie',
//                         radius: '55%',
//                         center: ['50%', '60%'],
//                         data: data,
//                         itemStyle: {
//                             emphasis: {
//                                 shadowBlur: 10,
//                                 shadowOffsetX: 0,
//                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
//                             }
//                         }
//                     }
//                 ],
//                 color: ['#0098D9', '#E6B600']
//             });
//         }
//     }
// });